<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.areashift.takeoff')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.takeoffcode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.shelves.charge')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.taskleader" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item :label="$t('m.areashift.code')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.areashiftcode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.areashift.taskoffusername')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.taskoffusername"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8" align="left">
          <el-form-item
            :label="$t('m.areashift.areashiftdetailcode')"
            :label-width="formLabelWidth"
          >
            <el-input maxlength="20" show-word-limit v-model="formInline.areashiftdetailcode"></el-input>
          </el-form-item>
          <el-form-item :label="$t('m.areashift.takedate')" :label-width="formLabelWidth">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="formInline.takeoffdate"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="-"
              start-placeholder
              end-placeholder
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
            <el-button type="primary" @click="appoint" v-if="hasPermission('assign')">{{$t('m.shelves.appoint')}}</el-button>
            <el-button type @click="print" v-if="hasPermission('print')">{{$t('m.print')}}</el-button>
            <el-button type @click="printCode" v-if="hasPermission('printCode')">{{$t('m.areashift.printCode')}}</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          stripe
          empty-text
          fits
          v-loading="tableLoading"
          :data="tableData"
          :row-style="tableRowStyle"
          :row-class-name="tableRowClassName"
          @row-click="rowClick"
          @selection-change="handleMultiSelectionChange"
        >
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="takeoffcode" :label="$t('m.areashift.takeoff')">
            <template slot-scope="scope">
              <template v-if="hasPermission('table-check')">
                <el-button
                  type="text"
                  @click.stop="$router.push({ path: 'takeoffInfo', query: {id:scope.row.takeoffid,opt:'info'}})"
                >{{scope.row.takeoffcode}}</el-button>
              </template>
              <template v-else>{{scope.row.takeoffcode}}</template>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="areashiftcode" :label="$t('m.areashift.code')"></el-table-column>
          <el-table-column align="center" prop="timelimit" :label="$t('m.transposing.limit')">
            <!-- <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.timetype==1"
              >{{$t('m.transposing.limit1')}}</el-button>
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.timetype==2"
              >{{$t('m.transposing.limit2')}}</el-button>
              <el-button
                size="mini"
                type="success"
                v-if="scope.row.timetype==3"
              >{{$t('m.transposing.limit3')}}</el-button>
            </template>-->
          </el-table-column>
          <el-table-column :label="$t('m.state')" align="center" prop="state">
            <template slot-scope="scope">{{scope.row.state|stateFilter(lan)}}</template>
          </el-table-column>
          <el-table-column :label="$t('m.shelves.charge')" align="center" prop="taskleader"></el-table-column>
          <el-table-column align="center" prop="assigneddate" :label="$t('m.areashift.appointdate')"></el-table-column>
          <el-table-column
            :label="$t('m.areashift.taskoffusername')"
            align="center"
            prop="taskoffusername"
          ></el-table-column>
          <el-table-column align="center" prop="taskoffdate" :label="$t('m.areashift.takedate')"></el-table-column>
          <el-table-column align="center" :label="$t('m.operation')">
            <template slot-scope="scope">
              <el-button
                @click="takeoff(scope.row)"
                v-if="hasPermission('table-takeoff')&&scope.row.state==2||scope.row.state==3"
                type="primary"
                size="mini"
              >{{$t('m.areashift.take')}}</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          background
          layout="sizes, prev, pager, next, jumper"
          :page-sizes="pageSizeList"
          :page-size="rowSize"
          :current-page="page"
          :total="totalRows"
          @current-change="currentChangeInitFn"
          @size-change="handleSizeChangeInitFn"
        ></el-pagination>
      </el-col>
    </el-row>
    <!-- 打印 start -->
    <transPrint
      :popupLoading="popupLoading"
      v-if="printVisible"
      :popupVisible="printVisible"
      :detail="popupData"
      @close="printVisible=false"
    ></transPrint>
    <!-- 打印dialog end -->
    <!-- 指派负责人 start -->
    <assignPopup
      v-if="assignDialogVisible"
      :dialogVisible="assignDialogVisible"
      :options="taskleaderOptions"
      @close="assignDialogVisible=false"
      @save="appointmentSave"
    ></assignPopup>
    <!-- 指派负责人 end -->
  </div>
</template>

<script>
import assignPopup from '@/components/common/assign'
import common from '@/utils/common'
import transPrint from './print-popup'
export default {
  data(){
    return {
      assignDialogVisible:false, // 控制指派负责人dialog显示隐藏
      formInline:{
        takeoffcode:'',
        areashiftcode:'',
        areashiftdetailcode:'',
        taskleader:'',
        taskoffusername:'',
        takeoffdate:[]
      },
      tableData:[],
      dialogFormVisible:false,
      formLabelWidth:'180px',
      printVisible:false,
      popupLoading:true,
      popupData:{}
    }
  },
  components:{ assignPopup, transPrint },
  watch:{},
  filters:{
    //   1 待处理2待下架3部分下架4已完成
    stateFilter(value, lan){
      return [
        lan('m.quality.state1'),
        lan('m.areashift.state3'),
        lan('m.areashift.state4'),
        lan('m.shelves.state5')
      ][value - 1]
    }
  },
  computed:{
    // 1 待处理 2审核不通过3待下架4部分下架 5待上架6部分上架10已完成
    states(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.quality.state1')
        },
        {
          id:2,
          label:this.$t('m.areashift.state2')
        },
        {
          id:3,
          label:this.$t('m.areashift.state3')
        },
        {
          id:4,
          label:this.$t('m.areashift.state4')
        },
        {
          id:5,
          label:this.$t('m.shelves.state1')
        },
        {
          id:6,
          label:this.$t('m.shelves.state4')
        },
        {
          id:10,
          label:this.$t('m.shelves.state5')
        }
      ]
    },
    timetype(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.out.timetype1')
        },
        {
          id:2,
          label:this.$t('m.out.timetype2')
        }
      ]
    }
  },
  methods:{
    lan(arg){
      return this.$t(arg)
    },
    init(){
      let [taskoffstartdate, taskoffendtdate] =
        this.formInline.takeoffdate || Array.from(2)
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/takeoff/page',
        params:{
          page:this.page,
          rows:this.rowSize,
          takeoffcode:this.formInline.takeoffcode,
          areashiftcode:this.formInline.areashiftcode,
          areashiftdetailcode:this.formInline.areashiftdetailcode,
          taskleader:this.formInline.taskleader,
          taskoffusername:this.formInline.taskoffusername,
          taskoffstartdate:taskoffstartdate,
          taskoffendtdate:taskoffendtdate
        }
      }).then(({data})=> {
        for (let i = 0; i < data.records.length; i++){
          data.records[i].taskoffdate = common.timestampToTime(
            data.records[i].taskoffdate
          )
          data.records[i].assigneddate = common.timestampToTime(
            data.records[i].assigneddate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(()=>this.tableLoading=false,500)
      })
    },
    search(){
      this.page = 1
      this.init()
    },
    appoint(){
      if (!this.tableRowSelected.length)
        return this.callbackMessage(this.$t('m.shelves.choose'))
      if (this.tableRowSelected[0].state !== 1)
        return this.callbackMessage(
          this.$t('m.areashift.takeoffmsg')
        )
      this.stocktakeid = this.tableRowSelected[0].stocktakeid // 获取当前选中的盘点单id，保存指派人的时候会用到
      let options = {
        method:'get',
        url:'/takeoff/taskleaders',
        params:{
          areaids:this.tableRowSelected[0].areaid
        }
      }
      this.$axios(options).then(({ data }) => {
        this.taskleaderOptions = data.map(item => {
          return { userid:item.userid, username:item.username }
        })
        this.assignDialogVisible = true
      })
    },
    takeoff(row){
      if(row.taskleaderid){
        this.$router.push({ path:'take', query:{id:row.takeoffid,opt:'take'}})
      }else{
        this.$message.error(this.$t('m.choose')+this.$t('m.shelves.charge'))
      }
    },
    appointmentSave(taskleaderid){
      if (taskleaderid){
        let { username:taskleader } = this.taskleaderOptions.find(item => {
          return item.userid === taskleaderid
        })
        let arr = this.tableRowSelected.map((item)=>item.takeoffid).join(',')
        let options = {
          method:'put',
          url:'/takeoff/assign',
          params:{
            shelvestaskids:arr,
            taskleaderid,
            taskleader
          }
        }
        this.$axios(options).then(({ message }) => {
          this.callbackMessage(message, 'success')
          this.assignDialogVisible = false
          this.init()
        })
      }
    },
    close(formName){
      this.$refs[formName].resetFields()
      this.dialogFormVisible = false
      this.init()
    },
    getInfo(){
      this.$axios({
        method:'get',
        url:`/takeoff/${this.tableRowSelected[0].takeoffid}`
      }).then(({data})=> {
        this.popupData = data
        this.popupLoading = false
      })
    },
    print(){
      if (this.tableRowSelected.length !==1){
        this.$message(this.$t('m.areashift.one'))
      } else {
        this.printVisible = true
        this.getInfo()
      }
    },
    printCode(){
      if (this.tableRowSelected.length !==1){
        this.$message(this.$t('m.areashift.one'))
      } else {
        this.$axios({
          method:'post',
          url:'/printtemplate/query',
          data:{
            ids:[this.tableRowSelected[0].takeoffid],
            templateName:'takeoff'
          }
        }).then(({data})=> {
          this.printContent = data
          this.printContent +=
            'LODOP.SET_PRINT_PAGESIZE(1, "50mm", "30mm", "");LODOP.PREVIEW();'
          eval(this.printContent)
        })
      }
    }
  },
  activated(){
    this.init()
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>